<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data属性</title>
</head>
<body>
    <ul id="list">

    </ul>
</body>
<script>
    // 键是ID 值是信息
    var data = {
        01: {
            name: "张三1",
            age: 18
        },
        02: {
            name: "张三2",
            age: 19
        },
        03: {
            name: "张三3",
            age: 20
        }
    };
    var list = document.getElementById("list");
    for(var id in data){
        var item = data[id];
        var liem = document.createElement("li");
        liem.innerHTML = item.name;
        //自定义data-*属性
        liem.setAttribute("data-name",item.name);
        liem.setAttribute("data-age",item.age);
        list.appendChild(liem);
        //点击获取dataset属性
        liem.addEventListener("click",function(){
            //下面这两种方式均可以，都不带data-
            alert(this.dataset['name']);
            alert(this.dataset.name);
        })
    }
</script>
</html>